<template>
	<view class="container">
		<u-form :model="userInfo" ref="uForm">
			<u-form-item label="头像" label-width="150" prop="avatar">
				<u-avatar class="u-avatar" :src="userInfo.avatar" size="150" @click="chooseAvatar"></u-avatar>
			</u-form-item>
			<u-form-item label="昵称" label-width="150" prop="nickName">
				<u-input v-model="userInfo.nickName" :clearable="false" maxlength="30" />
			</u-form-item>
			<u-form-item label="性别" label-width="150" prop="sex">
				<u-input v-model="sexText" type="select" :clearable="false" @click="sexSheetShow = true" />
				<u-action-sheet :list="actionSheetList" v-model="sexSheetShow" @click="actionSheetCallback">
				</u-action-sheet>
			</u-form-item>
			<u-form-item label="手机" label-width="150" prop="phonenumber">
				<u-input type="number" v-model="userInfo.phonenumber" :clearable="false" maxlength="11" :disabled="true" />
			</u-form-item>
			<u-form-item label="QQ" label-width="150" prop="qqnumber">
				<u-input type="number" v-model="userInfo.qqnumber" :clearable="false" maxlength="15" />
			</u-form-item>
			<u-form-item label="邮箱" label-width="150" prop="email">
				<u-input v-model="userInfo.email" :clearable="false" maxlength="30" />
			</u-form-item>
			<u-form-item label="个人简介" label-width="150">
				<u-input v-model="userInfo.remark" type="textarea" :clearable="false" />
			</u-form-item>
			
			<u-button shape="circle" @click="edit">修改</u-button>
			
			<u-toast ref="uToast" />
		</u-form>
		
	</view>
</template>

<script>
	import {appConfig} from '@/config/config.js'
	import {
		getUser,
		getUserById,
		edit,
		changeAvatar
	} from "@/api/user.js";
	import {
		constant
	} from '@/utils/constant.js'
	export default {
		data() {
			return {
				userInfo: {},
				sexSheetShow: false,
				sexText: '',
				actionSheetList: [{
					text: '男'
				},{
					text: '女'
				}],
				rules: {
					nickName: [
						{
							required: true,
							message: '请输入姓名',
							trigger: 'blur' ,
						},{
							min: 2,
							max: 10,
							message: '昵称长度在2到10个字符',
							trigger: ['change','blur']
						}
					],
					qqnumber: [
						{
							min: 2,
							max: 10,
							message: 'QQ长度在4到12个字符',
							trigger: ['change','blur']
						}
					],
					phonenumber: [
						{
							validator: (rule, value, callback) => {
								// 调用uView自带的js验证规则，详见：https://www.uviewui.com/js/test.html
								return this.$u.test.mobile(value);
							},
							message: '手机号码不正确',
							// 触发器可以同时用blur和change，二者之间用英文逗号隔开
							trigger: ['change', 'blur'],
						}
					],
					email: [{
							validator: (rule, value, callback) => {
								// 调用uView自带的js验证规则，详见：https://www.uviewui.com/js/test.html
								return this.$u.test.email(value);
							},
							message: '邮箱不正确',
							// 触发器可以同时用blur和change，二者之间用英文逗号隔开
							trigger: ['change', 'blur'],
						}
					],
				}
			}
		},
		methods: {
			chooseAvatar(){
				// 此为uView的跳转方法，详见"文档-JS"部分，也可以用uni的uni.navigateTo
				this.$u.route({
					// 关于此路径，请见下方"注意事项"
					url: 'pages/user-edit/u-avatar-cropper/u-avatar-cropper',
					// 内部已设置以下默认参数值，可不传这些参数
					params: {
						// 输出图片宽度，高等于宽，单位px
						destWidth: 200,
						// 裁剪框宽度，高等于宽，单位px
						rectWidth: 200,
						// 输出的图片类型，如果'png'类型发现裁剪的图片太大，改成"jpg"即可
						fileType: 'jpg',
					}
				})
			},
			// 点击actionSheet回调
			actionSheetCallback(index) {
				this.sexText = this.actionSheetList[index].text;
				this.userInfo.sex = index
			},
			edit() {
				this.$refs.uForm.validate(valid => {
					if (valid) {
						edit(this.userInfo).then(res => {
							this.userInfo = res.data
							uni.setStorageSync(constant.userInfo, res.data);
							this.sexText = this.actionSheetList[Number(res.data.sex)].text;
							this.$refs.uToast.show({
								title: '修改成功',
								type: 'success'
							})
						})
					}
				})
			}
		},
		onLoad(options) {
			getUser().then(res => {
				this.userInfo = res.data
				this.sexText = this.actionSheetList[Number(res.data.sex)].text;
			})
		},
		created() {
			// 监听从裁剪页发布的事件，获得裁剪结果
			uni.$on('uAvatarCropper', path => {
				console.log(path);
				this.userInfo.avatar = path;
				// 可以在此上传到服务端
				uni.uploadFile({
					url: appConfig.WEB_API + '/common/upload',
					header: {
						'Content-Type': 'application/json',
						'ApiAuthorization': uni.getStorageSync(constant.tokenKey)
					},
					filePath: path,
					name: 'file',
					success: (res) => {
						let params = {}
						params.avatar = JSON.parse(res.data).data.url
						changeAvatar(params).then(res => {
							this.userInfo = res.data
							uni.setStorageSync(constant.userInfo, this.userInfo);
							this.sexText = this.actionSheetList[Number(res.data.sex)].text;
							
							this.$refs.uToast.show({
								title: '头像修改成功',
								type: 'success'
							})
						})
					}
				});
			})
		},
		// 表单校验：必须要在onReady生命周期，因为onLoad生命周期组件可能尚未创建完毕
		onReady() {
			this.$refs.uForm.setRules(this.rules);
		}
	}
</script>

<style lang="scss">
	@import "./user-edit.scss";
</style>
